<template>
   <div class="login_container">
        <div class="login_box">
            <!--logo-->
            <div class="avatar_box">
                <div class="logo iconfont icon-fen"></div>
                <div class="title">考试管理系统</div>
            </div>
            <!--登录表单区域-->
            <el-form 
                label-width="0px" 
                class="login_form" 
                :model="loginForm"
                :rules="loginFormRules"
                ref="loginFormRef">
                <el-form-item prop="userName">
                    <el-input  v-model="loginForm.userName"  placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="loginForm.remember" name="remember" size="medium" class="myRedCheckBox">下次自动登录</el-checkbox>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="login('loginFormRef')">登录</el-button>
                </el-form-item>
        </el-form>
        </div>
   </div>
</template>

<script>

export default {
    data(){
        return {
            //这是登录表单的数据绑定
            loginForm: {
                userName: "teacher",
                password: "123456",
                remember: false
            },
            //这是表单的验证规则
            loginFormRules: {
                userName:[
                    {required: true,message: "请填写用户名！",trigger: 'blur'}
                ],
                password: [
                   {required: true,message: "请填写密码！",trigger: 'blur'}
                ]
            }
        }
    },
    created(){
        //清空用户登录
        window.sessionStorage.removeItem("tokenStr");
        window.sessionStorage.removeItem("user");
        //清空激活按钮
        window.sessionStorage.removeItem("activePath");
    },
    methods: {
        login(loginFormRef){
            
            this.$refs[loginFormRef].validate( valid => {
                if( !valid) {
                    this.$message.error("请输入所有字段！！");
                    return false;
                }else{
                    this.postRequest('/login',this.loginForm).then( resp => {
                       if(resp){ //登录成功
                           //获取token
                           const tokenStr = resp.obj.tokenHead + resp.obj.token;
                           //放到 缓存在
                           window.sessionStorage.setItem("tokenStr",tokenStr);
                           //跳转首页
                           let path = this.$route.query.redirect;
                           this.$router.replace(( path == '/' || path == undefined)?'/home':path);
                       }
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
// $theme-color: #66BB6A;
.login_container{
    height: 100%;
}
.login_box{
    margin: 20px 20px;
    width: 430px;
    height: 450px;
    border-radius: 10px;
    box-shadow:0px 0px 50px #66BB6A;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-60%, -60%);
}
.avatar_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    .logo{
        font-size: 98px;
        color: $theme-color;
    }
    .title{
        font-size: 28px;
        color:$font-color;
        font-weight: 300;
        letter-spacing: 2px;
    }
}
.login_form{
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    .el-checkbox{
        color:#C0C4CC !important;
        font-size: $font-size !important;
    }
}
.btns {
    button{
        width: 100%;
        background: $theme-color;
        border: none;
        padding: 14px 0;
        letter-spacing: 1px;
    }
  
}
</style>